<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>足迹</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
        .p1{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .My-footprints .bd-2 ul li, .My-footprints .bd-3 ul li, .My-footprints .bd-4 ul li, .My-footprints .bd-5 ul li{
            overflow: hidden;
        }
        .My-footprints .bd-1 ul li .p2 img{
        	margin-right: 0;
        	margin-left: 0;
        }
    </style>
</head>

<body>
    <!--头部-->
    <!-- <div class="public-header flex">
        <span class="public-header-left-back"></span>
        <span class="public-header-center">优惠券</span>
        <span class="public-header-right"></span>
    </div> -->

    <!--正文-->
    <div class="My-footprints bc-gray">
        <div class="hd flex">
            <a href="javascript:;" class="active">关注</a>
            <!-- <a href="javascript:;">围观</a> -->
            <a href="javascript:;">参拍</a>
            <a href="javascript:;">足迹</a>
            <a href="javascript:;">收藏</a>


        </div>
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <ul class="clearfix">
                    <div v-show="show1" style="margin-top: 20px;text-align: center;">
                        暂无数据
                    </div>
                    <div v-else>
                        <li v-for="item in tab1" @click='click_shop(this)'>
                        <img :src="item.store_image" alt="">
                        <p class="p1" v-html="item.store_name"></p>
                        <p class="p2 flex">
                            <img src="../img/VIP@2x.png" alt="">
                            <span>{{item.store_level}}</span>
                            <!--<em>评分:{{item.store_score}}分</em>-->
                        </p>
                    </li>
                    </div>
                </ul>
            </div>
            <!-- <div class="bd-2 bd-0">
                <h6>已截拍</h6>
                <ul class="clearfix">
                    <li>
                        <img src="../img/今日产品 图片@2x.png" alt="">
                        <p class="p1">产品名字产品名字产品</p>
                        <p class="p2 flex">
                            <span>￥:4000</span>
                            <em>141</em>
                        </p>
                    </li>
                    <li>
                        <img src="../img/今日产品 图片@2x.png" alt="">
                        <p class="p1">产品名字产品名字产品</p>
                        <p class="p2 flex">
                            <span>￥:4000</span>
                            <em>141</em>
                        </p>
                    </li>
                    <li>
                        <img src="../img/今日产品 图片@2x.png" alt="">
                        <p class="p1">产品名字产品名字产品</p>
                        <p class="p2 flex">
                            <span>￥:4000</span>
                            <em>141</em>
                        </p>
                    </li>
                </ul>
            </div> -->
            <div class="bd-3 bd-0">
                <!--<h6>近七天</h6>--> 
                <ul class="clearfix">
                    <div v-show="show2" style="margin-top: 20px;text-align: center;">
                        暂无数据
                    </div>
                    <div v-else>
                        <li v-for="item in tab2">
                            <img :src="item.produce_head_image.split(',')[0]" alt="" @click='click_link(this)'>
                            <p class="p1">{{item.produce_title}}</p>
                            <p class="p2 flex">
                                <span>￥:{{item.produce_price}}</span>
                                <em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em>
                            </p>
                        </li>
                    </div>
                </ul>
            </div>
            <div class="bd-4 bd-0 ">
                <h6>今日</h6>
                <ul class="clearfix">
                    <div v-show="show3" style="margin-top: 20px;text-align: center;">
                        暂无数据
                    </div>
                    <div v-else>
                        <li v-for="item in tab3[0]">
                            <img :src="item.produce_head_image.split(',')[0]" alt="" @click='click_link(this)'>
                            <p class="p1">{{item.produce_title}}</p>
                            <p class="p2 flex">
                                <span>￥:{{item.produce_price}}</span>
                                <em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em>
                            </p>
                        </li>
                    </div>

                </ul>
            </div>
            <div class="bd-5 bd-0">
                 <h6>近七天</h6>
                <ul class="clearfix">
                    <div v-show="show4" style="margin-top: 40px;text-align: center">
                        暂无数据
                    </div>
                    <div v-else>
                        <li v-for="item in tab4" style="position:relative;">
                            <img :src="item.produce_head_image.split(',')[0]" alt="" @click='click_link(this)'>
                            <p class="p1">{{item.produce_title}}</p>
                            <p class="p2 flex">
                                <span>￥:{{item.produce_price}}</span>
                                <em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em>
                            </p>
                            <font @click='delete($index,this)' style="position: absolute;top: 0.05rem;right: 0.05rem;height:0.2rem;border-radius:0.2rem ;display: inline-block;width: 0.2rem;text-align: center;background:rgba(0,0,0,0.3) url(../img/close_1.png) no-repeat center center;"></font>
                        </li>
                    </div>
                </ul>
            </div>




        </div>




    </div>

    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>

    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })



        })
    </script>
    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {
                    uid:'',
                    tab1:'',
                    tab2:'',
                    tab3:'',
                    tab4:'',
                    show1:false,
                    show2:false,
                    show3:false,
                    show4:false
                },
                ready: function () {
                    var _self = this;
                    this.uid = sessionStorage.getItem("uid");
                    this.$http.get(base_url + 'ZITAOHUI/buyerUser', {
                        params: {
                            userId: _self.uid
                        }
                    }).then(function (data) {
                        console.log(data)
                        let tab3 = data.data.extend.list;

                        if(tab3[0].length == 0){
                            _self.show3 = true;
                        }
                        this.$set('tab3', tab3);



                        let tab2 = data.data.extend.list2;
                        if(tab2.length == 0){
                            _self.show2 = true;
                        }
                        this.$set('tab2', tab2)




                        let tab1 = data.data.extend.list3;
                        if(tab1.length == 0){
                            _self.show1 = true;
                        }
                        this.$set('tab1', tab1)




                        let tab4 = data.data.extend.list4;
                        this.$set('tab4', tab4)
                        if(tab4.length == 0){
                            _self.show4 = true;
                        }
                        console.log(this.tab4)
                    })


                },
                methods: {
     
                    click_link: function (t) {
                        console.log(t)
                        if (t.item.whitch_type == 0) {
                            window.location.href = '../page/buy-info-page.4.html?p_id=' + t.item.produce_id
                        } else {
                            window.location.href = '../page/buy-info-page.3.html?p_id=' + t.item.produce_id+"&time="+new Date().getTime()
                        }
                    },
                    click_shop: function (t) {
                        console.log(t)
                        window.location.href = '../page/Shop.html?s_id=' + t.item.store_id
                    },
               
                    add_good: function (t) {
                        console.log(t)

                        this.$http.get(base_url + 'ZITAOHUI/goodNum', {
                            params: {
                                produceId: t.item.produce_id,
                                user_id: sessionStorage.getItem("uid")
                            }
                        }).then(
                            function (data) {
                                console.log(data)
                                let sun = data.data.extend;
                                sun = sun.haha.list;
                                if (sun == 1) {
                                    t.item.produce_good_num += 1;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                } else {
                                    alert('您已经对该商品点过赞啦')
                                }
                            }
                        )
                    },
                    delete: function (index,t) {
                        console.log(this)

                        
                        this.$http.get(base_url + 'ZITAOHUI/deleteConllection', {
                            params: {
                                user_id: sessionStorage.getItem("uid"),
                                produce_id: t.item.produce_id
                            }
                        }).then(
                            function (data) {
                                console.log(data)
                                this.tab4.splice(index, 1);
                            }
                        )
                    }
                }
            })
        })
    </script>
</body>

</html>